<template >
  <div id="123">
    <!-- B站导航栏 -->
<div class="z-top-container" id="bili-header-container" data-v-app="">
<div class="bili-header">
<div class="bili-header__bar mini-header">

<ul class="left-entry">
  <li class="v-popover-wrap">
    <a href="#/" class="left-entry__title">
<div class="mini-header__title">
<span>首页</span>
</div>
    </a>
 </li>
 <li class="v-popover-wrap"><a  target="_blank" class="default-entry"><span>小说</span></a></li>
 <li class="v-popover-wrap"><a  target="_blank" class="default-entry"><span>动态</span></a></li>
  <li class="v-popover-wrap"><a  target="_blank" class="default-entry"><span>none</span></a></li>
   <li class="v-popover-wrap"><a  target="_blank" class="default-entry"><span>none</span></a></li>
    <li class="v-popover-wrap"><a  target="_blank" class="default-entry"><span>none</span></a></li>
     <li class="v-popover-wrap"><a  target="_blank" class="default-entry"><span>none</span></a></li>
</ul>

 <ul class="right-entry">
  <li class="v-popover-wrap">
    <div data-v-35889324="" class="css-navSearchWrapper-SmTKa" style="width: 108px;"><input data-v-35889324="" placeholder="搜索" id="headernavk" type="text" data-name="PIT Minor" data-type="1" autocomplete="off" name="kw" class="css-navSearchInput-hcAgF"> <span data-v-35889324="" class="css-navSearchIcon-byBLe"><svg data-v-35889324="" fill="rgba(0,0,0,.4)" viewBox="0 0 32 32" id="search_13586fe" width="100%" height="100%"><title data-v-35889324="">search</title><path data-v-35889324="" d="M14.933 25.6c5.891 0 10.667-4.776 10.667-10.667s-4.776-10.667-10.667-10.667c-5.891 0-10.667 4.776-10.667 10.667s4.776 10.667 10.667 10.667zM26.894 23.877l3.491 3.491c0.833 0.833 0.833 2.184 0 3.017s-2.184 0.833-3.017 0l-3.491-3.491c-2.493 1.867-5.589 2.973-8.943 2.973-8.247 0-14.933-6.686-14.933-14.933s6.686-14.933 14.933-14.933c8.247 0 14.933 6.686 14.933 14.933 0 3.354-1.106 6.45-2.973 8.943z"></path></svg></span></div>
  </li>
<li class="v-popover-wrap">
  <a data-v-35889324="" class="css-navRightItemAvatar-Dhkpn"><img data-v-35889324="" src="https://apic.douyucdn.cn/upload/avatar_v3/202204/cd1144479be24f3d8024194ef381ded7_middle.jpg" width="100%" height="100%"></a>
</li>
<!-- 空闲 -->
<li class="v-popover-wrap"><a  target="_blank" class="default-entry"><span></span></a></li>
<li class="v-popover-wrap"><a  target="_blank" class="default-entry"><span></span></a></li>
<li class="v-popover-wrap"><a  target="_blank" class="default-entry"><span></span></a></li>
<!--  -->
 </ul>
</div>
</div>
</div>
<!-- 动态主题 -->
<div id="app1">
    <div class="bg"></div>
<div class="bili-dyn-home--member">
<aside class="left">
<section class="left00">
<div class="bili-dyn-my-info">
<div class="bili-dyn-my-info__header"><div class="bili-awesome-img" style="background-image: url();"></div></div>
<div class="bili-dyn-my-info__content">
<a  class="bili-dyn-my-info__face"><img class="bili-awesome-img" :src="src"></a>
<a  class="bili-dyn-my-info__name bili-ellipsis">{{username}}</a>
<div class="bili-dyn-my-info__stats">
<a  class="bili-dyn-my-info__stat__item"><div class="bili-dyn-my-info__stat__item__count">8</div> <div class="bili-dyn-my-info__stat__item__label">关注</div></a>
<a  class="bili-dyn-my-info__stat__item"><div class="bili-dyn-my-info__stat__item__count">8</div> <div class="bili-dyn-my-info__stat__item__label">粉丝</div></a>
<a  class="bili-dyn-my-info__stat__item"><div class="bili-dyn-my-info__stat__item__count">8</div> <div class="bili-dyn-my-info__stat__item__label">动态</div></a>

</div>
</div>
</div>
</section>
</aside>

<main>
<section>
    <div class="bili-dyn-publishing">
<div class="bili-dyn-publishing__topic">
    <div class="bili-topic-selector">
<div class="bili-topic-selector__desk">
<div class="bili-topic-selector__search">
    <div class="bili-topic-search">
<div class="bili-topic-search__popover">
<div class="bili-topic-search__input">
<span class="bili-topic-search__input__text">
        发表内容
      </span>

</div>

</div>
    </div>
</div>
<div class="bili-topic-selector__rcmd"><div class="bili-topic-selector__rcmd__default"></div> <!----></div>

</div>
    </div>
</div>

<div class="bili-dyn-publishing__input">
<div class="bili-rich-textarea" style="max-height: 300px;">
<el-input v-model="name"  type="textarea"
  autosize
   placeholder="有什么想和大家分享的？" contenteditable="true" class="bili-rich-textarea__inner" style="left: 0px;font-size: 14px; line-height: 22px; min-height: 22px;">
&ZeroWidthSpace;
<!-- </div> -->
</el-input>
</div>

</div>

<div class="bili-dyn-publishing__control">
<div class="bili-dyn-publishing__tools" >
<div class="bili-dyn-publishing__tools__item pic" style="position: relative;" @click="upload12">
<div role="tooltip" id="upload1" class="bili-popover" style="left: -15px; top: 24px; width: 500px; z-index: 2004; border-radius: 4px; box-shadow: rgba(0, 0, 0, 0.17) 0px 3px 5px 0px; cursor: default; display: none;">
<div class="bili-popover__arrow" style="left: 22px;"></div>
<div class="bili-pics-uploader">
<div class="bili-pics-uploader__header">
<div class="bili-pics-uploader__header__left">
<span class="bili-pics-uploader__title">图片上传</span>
</div>
<!-- <div class="bili-pics-uploader__header__right" > -->
    <div class="bili-pics-uploader__close" >
    <!-- <svg viewBox="0 0 8 8"  ><path fill-rule="evenodd" clip-rule="evenodd" d="M1.58359 1.58451C1.71377 1.45433 1.92482 1.45433 2.055 1.58451L3.99948 3.52899L5.94452 1.58396C6.07469 1.45378 6.28575 1.45378 6.41592 1.58396C6.54609 1.71413 6.54609 1.92519 6.41592 2.05536L4.47089 4.0004L6.41549 5.945C6.54566 6.07517 6.54566 6.28623 6.41549 6.4164C6.28531 6.54658 6.07426 6.54658 5.94408 6.4164L3.99948 4.4718L2.05543 6.41585C1.92525 6.54603 1.7142 6.54603 1.58402 6.41585C1.45385 6.28568 1.45385 6.07463 1.58402 5.94445L3.52808 4.0004L1.58359 2.05591C1.45342 1.92574 1.45342 1.71468 1.58359 1.58451Z" fill="currentColor"></path></svg> -->
     <i class="el-icon-close" @click="close12"></i>
    <!-- </div> -->
    </div>
</div>
<div class="bili-pics-uploader__content">
<el-upload
  class="upload-demo"
  action='http://localhost:8098/upload'
  :headers="{ 'token': token}"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload"
  :file-list="fileList"
  list-type="picture">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png/gif文件，且不超过2M</div>
</el-upload>
</div>
</div>
</div>
</div>
</div>
<div class="bili-dyn-publishing__headquarters"><div title="全角字符计数为1半角字符计数为0.5，不足1时记为1" class="bili-dyn-publishing__hint" style="display: none;">
        0
      </div> <!----> <!---->
        <el-button type="primary" class="bili-dyn-publishing__action launcher disabled" @click="publish()">发布</el-button></div>

</div>
    </div>
</section>
<section><!----></section>
<section>
<div class="bili-dyn-list-tabs">
<div class="bili-dyn-list-tabs__list">
<div class="bili-dyn-list-tabs__item active">
      全部
    </div>
</div>
</div>
<div class="bili-dyn-list">
<div class="bili-dyn-list__items">
    <div class="bili-dyn-list__item" v-for="(item,index) in list">
<div class="bili-dyn-item" style="background-color: #ffffff;">
<div class="bili-dyn-item__main">
<div class="bili-dyn-item__avatar">
<div data-module="avatar" class="bili-dyn-avatar" style="width: 48px; height: 48px;">
<div class="b-avatar" style="width: 48px; height: 48px;">
<div class="b-avatar__canvas" style="width: 64.8px; height: 64.8px;">
<div class="b-avatar__layers">
<div class="b-avatar__layer center" style="width: 48px; height: 48px; opacity: 1; border-radius: 50%;"><div class="b-avatar__layer__res local-6"><picture><img class="img4" :src="item.picture" loading="lazy" onerror="onAvtSrcError(this)"></picture></div></div>
</div>
</div>
</div>
</div>
</div>
<div class="bili-dyn-item__header">
<div data-module="title" class="bili-dyn-title">
    <span class="bili-dyn-title__text bili-dyn-title__text" style="color: rgb(251, 114, 153);" >
    {{item.name}}
  </span>
  </div>
<div data-module="time" class="bili-dyn-time">
  {{item.createTime}}
</div>
<div class="bili-dyn-item__ornament"><!----></div>
<div class="bili-dyn-item__more">
<div data-module="more" class="bili-dyn-more__btn tp">
<div role="tooltip" class="bili-popover" style="left: -69px; top: 16px; width: 94px; z-index: 0; border-radius: 8px; box-shadow: rgba(106, 115, 133, 0.12) 0px 11px 12px 0px; display: none; cursor: default;"><div class="bili-popover__arrow" style="right: 12px;"></div> <div class="bili-dyn-more__menu" style="padding: 16px 0px; color: rgb(34, 34, 34);"><div data-module="more" data-type="THREE_POINT_DELETE" data-params="&quot;{}&quot;" data-modal="{&quot;cancel&quot;:&quot;我点错了&quot;,&quot;confirm&quot;:&quot;删除&quot;,&quot;content&quot;:&quot;确定要删除此条动态吗？&quot;,&quot;title&quot;:&quot;删除动态&quot;}" class="bili-dyn-more__menu__item" style="height: 25px; padding: 2px 0px; text-align: center;">
      删除
    </div></div> </div>
</div>
</div>
</div>
<div class="bili-dyn-item__body">
<div class="bili-dyn-content">
<!-- <div class="bili-dyn-content__dispute"><div class="dyn-dispute"><i class="dyn-dispute__icon"></i> <span class="dyn-dispute__title">动态审核中，仅自己可见</span></div></div> -->
<div class="bili-dyn-content__dispute" v-if="item.status!=1" ><div class="dyn-dispute"><i class="dyn-dispute__icon"></i> <span class="dyn-dispute__title">动态审核中，仅自己可见</span></div></div>

<div class="bili-dyn-content__orig">
    <div data-module="desc" data-orig="0" class="bili-dyn-content__orig__desc"><div class="bili-rich-text"><div class="bili-rich-text__content"><span>{{item.content}}</span></div></div></div>
<div class="bili-dyn-content__orig__major gap">
<div class="bili-album" dyn-id="748979611570798612">
<div class="bili-album__preview grid3" style="" >
    <div class="bili-album__preview__picture" v-for="(pic1,index) in item.urls">
    <div class="bili-album__preview__picture__img bili-awesome-img" >
    <!-- <img src="http://cq12df.oss-cn-hangzhou.aliyuncs.com/material/2023/01-09/0e67e0c5-473f-4f01-aa63-695bc9b6075f.png" class="bili-album__preview__picture__img bili-awesome-img"> -->
    <div class="demo-image__preview" >
  <el-image
    style="width: 100px; height: 100px"
    :src="pic1"
    :preview-src-list="item.urls" >
  </el-image>
</div>
    </div>
   </div>
   </div>

</div>
</div>
</div>
</div>
</div>
<div class="bili-dyn-item__footer"><div class="bili-dyn-item__action"></div> <div class="bili-dyn-item__action"><div data-module="action" data-type="comment" class="bili-dyn-action comment"><i class="bili-dyn-action__icon"></i>
  评论
</div></div> <div class="bili-dyn-item__action"><div data-module="action" data-type="like" class="bili-dyn-action like" icons="[object Object]"><i class="bili-dyn-action__icon1"></i>
  点赞
</div> <!----></div></div>
</div>
</div>
    </div>
</div>
</div>
</section>

</main>
<!-- 右侧 -->
<aside class="right">
<section class="ses"><div class="bili-dyn-banner"><div class="bili-dyn-banner__title">公告栏</div>
 <div title="点击进入" class="bili-dyn-banner__img clickable">
    <div class="bili-awesome-img" >动态功能开放啦~~</div></div></div></section>
    <section>
        <div data-v-5c2a8293="" class="bili-dyn-ads">
<div data-v-5c2a8293="" class="swiper-container bili-dyn-ads__swiper swiper-container-initialized swiper-container-horizontal">
    <img src="https://cq12df.oss-cn-hangzhou.aliyuncs.com/tu1/new.jpg">
</div>
        </div>
    </section>
    <section class="sticky">
<div class="topic-panel">
<div class="topic-panel__nav"><span class="topic-panel__nav-title">话题</span> <!----></div>
</div>
    </section>
</aside>
</div>
</div>
<!--  -->
  </div>
</template>
<script>
import axios from 'axios'
  export default {
    data() {
      return {
        src:'',
        username:'',
        srcList: [
          'http://cq12df.oss-cn-hangzhou.aliyuncs.com/material/2023/01-09/3af253b7-bf65-4424-a7e1-4bc99f3162fb.png',

        ],
          url: ['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',],
        pic:[{},{}],
        list:[{},{},{},{}],
        list0:[],
        image7:'http://cq12df.oss-cn-hangzhou.aliyuncs.com/material/2023/01-09/d00c017c-d180-4255-b682-7a5dadfbb37b.png',
        token:localStorage.getItem("token"),
         fileList: [],

        name:'',

      }
    },
    created(){
this.findAll()
    },
    methods:{


        // 查询动态
        findAll(){
            let url='http://localhost:8098/findAllWemedia';
            let param={
                token:localStorage.getItem("token")
            }
            axios.post(url,param).then(resp=>{
                let result=resp.data;
                if(result.code===200){
                    this.src=result.data[0].picture
                    this.username=result.data[0].name
                    for(let i=1;i<result.data.length;i++){

                        this.list0.push(result.data[i])

                    }
                    this.list=this.list0;

                }
            })
        },
upload12(){
    if(localStorage.getItem("弹窗关闭")==="true"){
        localStorage.removeItem("弹窗关闭")
        let c=document.getElementById("upload1");
        c.style.display="none";
    }else{
localStorage.setItem("弹窗关闭","false")
    let u=document.getElementById("upload1");
    u.style.display="block"
    }


},
// 上传文件成功的回调
    handleAvatarSuccess(res,file,fileList){
      console.log(fileList)
      this.fileList=fileList
    },
publish(){
    let url='http://localhost:8098/wemedia/publish';
    let params={
        content:this.name,
        files:this.fileList
    }
    axios.post(url,params,{
         headers: {
           'content-type': 'application/json',
           "token":localStorage.getItem("token")  //token换成从缓存获取
        }
    }).then(resp=>{
        let result=resp.data
        if(result.code===200){
            this.$message({
            showClose: true,
          message: result.errorMessage,
          type: 'success'
        });
        this.findAll()
        document.getElementById("upload1").style.display="none";
        this.fileList=undefined;
        this.name=undefined;

        }else{
            this.$message({
            showClose: true,
          message: result.errorMessage,
          type: 'error'
        });
        }
    })

},
  beforeAvatarUpload(file) {
    let isJPG=false;
    if(file.type === 'image/jpeg'||file.type === 'image/png'||file.type === 'image/gif'){
         isJPG=true;
    }
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
  handleRemove(file) {
        console.log(file);
        let param={
            name:file.name,
            size:file.size,
            uid:file.uid
        };
        let url='http://localhost:8098/wemedia/removepic'
         axios.post(url,param,{
              headers: {
           'content-type': 'application/json',
           "token":localStorage.getItem("token")  //token换成从缓存获取
        }
         }).then(resp=>{

         })
      },
      handlePreview(file) {
        console.log(this.fileList);
      },

      close12(){
        localStorage.setItem("弹窗关闭","true")


      }

    }
  }
</script>

<style scoped>
/* 左侧 */
.bili-dyn-my-info__stat__item__label {
    font-size: 12px;
    color: #99a2aa;
}
.bili-dyn-my-info__stat__item__count {
    font-weight: 700;
    line-height: 19px;
    font-size: 14px;
    color: #222;
}
.bili-dyn-my-info__stat__item {
    width: 33.33333%;
    height: 46px;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
        display: flex;
    justify-content: space-between;
}
.bili-dyn-my-info__stats {
    display: flex;
    justify-content: space-between;
}
.bili-ellipsis {
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
}
.bili-dyn-my-info__name {
    padding-left: 54px;
    font-size: 13px;
    -webkit-line-clamp: 1;
    cursor: pointer;
}
.left00{
        width: 100%;
    margin-bottom: 8px;
}

.bili-dyn-my-info__face {
    position: absolute;
    width: 56px;
    height: 56px;
    left: 16px;
    top: -16px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
}
.bili-dyn-my-info__content {
    box-sizing: border-box;
    width: 100%;
    height: calc(100% - 64px);
    position: relative;
    padding: 10px 26px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.bili-awesome-img {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%;
}
.bili-dyn-my-info__header {
    height: 64px;
    width: 100%;
}
/*  */
.bili-album__preview {
    display: flex;
    flex-wrap: wrap;
    width: 320px;
}
.grid3 {
    display: flex;
    flex-wrap: wrap;
    width: 320px;
}
/* 右侧  */
.topic-panel__nav-title {
    color: #222;
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
}
.topic-panel__nav {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}
.topic-panel {
    background: #fff;
    border-radius: 4px;
    font-family: PingFang SC;
    font-style: normal;
    padding: 16px 16px 1px;
}
.sticky {
        width: 100%;
    margin-bottom: 8px;
    position: sticky;
    top: 8px;
}
.bili-dyn-ads[data-v-5c2a8293] {
    width: 268px;
    height: 156px;
    margin-bottom: 8px;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}
.bili-awesome-img {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%;
}
.bili-dyn-banner__img {
    overflow: hidden;
    width: 100%;
    height: 100px;
    border-radius: 4px;
    background: #fff 50%/cover no-repeat;
}
.bili-dyn-banner__title {
    font-size: 14px;
    margin-bottom: 8px;
}
.bili-dyn-banner {
    padding: 12px 16px 16px;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
    background-color: #fff;
}
.ses{
    width: 100%;
    margin-bottom: 8px;
}
.right {
    width: 268px;
    flex-shrink: 0;
}
/*  */
/* 动态列表 */

.bili-dyn-action__icon1{
    background-image: url();
     background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    height: 16px;
    margin-right: 4px;
    width: 20px;
}
.bili-dyn-action__icon{
     background-image: url();
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    height: 16px;
    margin-right: 4px;
    width: 20px;
}

.bili-dyn-action {
    align-items: center;
    color: #99a2aa;
    cursor: pointer;
    display: flex;
    font-size: 12px;
    height: 100%;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 92px;
}
.bili-dyn-item__action {
    position: relative;
}
.bili-dyn-item__footer {
    display: flex;
    height: 48px;
}
.bili-awesome-img {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%;
}
.bili-album__preview__picture__img {
    border-radius: 4px;
    cursor: zoom-in;
}
.bili-album__preview__picture {
    position: relative;
    margin-right: 4px;
    height: 104px;
    width: 104px;
}
.bili-album {
    width: 518px;
}
.bili-dyn-content__orig__major {
    width: 520px;
        margin-top: 10px;
}
.bili-rich-text__content {
    color: #222;
}
.bili-rich-text {
    font-family: Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
    font-size: 14px;
    letter-spacing: .5px;
    line-height: 22px;
    white-space: pre-wrap;
    word-break: break-word;
}
.bili-dyn-content__orig__desc {
    cursor: pointer;
    padding-right: 10px;
}
.dyn-dispute__title {
    background-color: #fff1d3;
    border-radius: 2px;
    color: #e78b1f;
    font-size: 12px;
    padding: 3px 4px 3px 24px;
}
.dyn-dispute__icon {
    background: url() 50%/contain no-repeat;
    display: inline-block;
    height: 16px;
    left: 5px;
    position: absolute;
    top: 2px;
    width: 14px;
}
element.style {
}
.bili-dyn-item, .bili-dyn-item div {
    box-sizing: border-box;
}
.dyn-dispute {
    -webkit-box-pack: start;
    align-items: center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    line-height: 16px;
    max-width: 100%;
    position: relative;
}
.bili-dyn-content {
    font-family: Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
    width: 532px;
}
.bili-dyn-item__body {
    margin-top: 10px;
}
.bili-dyn-more__btn{
    background-image: url();
    height: 16px;
    right: 0;
    top: 3px;
    width: 16px;
}
.bili-dyn-item__more {
    position: absolute;
    right: 16px;
    top: 30px;
}
.bili-dyn-item__ornament {
    position: absolute;
    right: 48px;
    top: 18px;
}
element.style {
}
.bili-dyn-item, .bili-dyn-item div {
    box-sizing: border-box;
}
.bili-dyn-time {
    color: #99a2aa;
    cursor: pointer;
    font-size: 12px;
    height: 22px;
    line-height: 18px;
    padding-top: 4px;
    transition: color .3s ease;
    user-select: none;
    width: fit-content;
}
.bili-dyn-title__text {
    cursor: pointer;
    font-size: 16px;
}
.bili-dyn-title {
    align-items: center;
    display: flex;
    height: 24px;
    width: max-content;
}
.bili-dyn-item__header {
    height: 73px;
    padding-top: 27px;
}
.img4{
        width: 100%;
    height: 100%;
}
.b-avatar__layer__res {
    width: 100%;
    height: 100%;
    isolation: isolate;
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.center {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.b-avatar__layer {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    isolation: isolate;
    overflow: hidden;
}
.b-avatar__layers {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.b-avatar__canvas {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.b-avatar {
    position: relative;
    pointer-events: none;
}
.bili-dyn-avatar {
    cursor: pointer;
}
.bili-dyn-item__avatar {
    height: 48px;
    left: 24px;
    position: absolute;
    top: 24px;
    width: 48px;
}
.bili-dyn-item__main {
    padding: 0 12px 0 88px;
    position: relative;
}
.bili-dyn-item {
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 4px;
    font-family: Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
    letter-spacing: 0;
    min-width: 632px;
    position: relative;
}
.bili-dyn-list__item {
    margin-bottom: 8px;
}


.bili-dyn-list {
    margin-top: 8px;
    min-width: 632px;
}
/*  */
/* 上传图片 */
  .avatar-uploader .el-upload {
    border: 1px dashed #525151;
    border-radius: 6px;
    cursor: pointer;
    border-color: #1e1f20;
    color: #8c939d;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #1e1f20;

  }
  .avatar-uploader-icon {
    border: 1px dashed #bcb8b8;
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
/*  */
/* 主体 */
.bili-dyn-list-tabs__item {
    align-items: center;
    color: #6d757a;
    cursor: pointer;
    display: flex;
    font-size: 14px;
    height: 100%;
    justify-content: center;
    margin-left: 20px;
    min-width: 56px;
    position: relative;
}
.bili-dyn-list-tabs__list {
    display: flex;
    height: 100%;
}
.bili-dyn-list-tabs {
    background-color: #fff;
    border-radius: 4px;
    height: 48px;
    position: relative;
    width: 100%;
}
.bili-dyn-publishing__headquarters {
    align-items: center;
    display: flex;
    justify-content: center;
}
.bili-dyn-publishing__action {
    align-items: center;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    font-size: 13px;
    height: 32px;
    justify-content: center;
    width: 70px;
}
.bili-pics-uploader__content {
    display: flex;
    flex-wrap: wrap;
    padding: 0 15px 0 5px;
    margin-bottom: 10px;
}
.bili-pics-uploader__header__right{
    left: -15px;
    top: 24px;
    width: 20px;
    z-index: 2004;
    border-radius: 4px;
    box-shadow: rgb(0 0 0 / 17%) 0px 3px 5px 0px;
    cursor: default;
    display: block;
}
.bili-pics-uploader__close {
    box-sizing: border-box;
    color: #999;
    cursor: pointer;
}
.bili-pics-uploader__title {
    color: #222;
    font-size: 14px;
}
.bili-pics-uploader__header {
        box-sizing: border-box;
    display: flex;
    height: 50px;
    justify-content: space-between;
    padding: 15px;
}
.bili-pics-uploader {
    min-height: 143px;
    width: 100%;
}
.bili-popover__arrow {
        border-left: 1px solid #e5e9ef;
    border-top: 1px solid #e5e9ef;
    height: 8px;
    top: -5px;
    transform: rotate(45deg);
    width: 8px;
    background-color: #fff;
    position: absolute;
}
.bili-popover {
    background-color: #fff;
    position: absolute;
        border: 1px solid #e5e9ef;
    color: #222;
    font-family: Microsoft YaHei,Arial,Helvetica,sans-serif;
    font-size: 12px;
    margin-bottom: 10px;
    margin-top: 7px;
    pointer-events: all;

}
.bili-dyn-publishing__tools__item {
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
    height: 24px;
    user-select: none;
    width: 24px;
    background-image: url();
}
.bili-dyn-publishing__tools {
    align-items: center;
    display: flex;
    position: relative;
}
.bili-dyn-publishing__control {
    align-items: center;
    display: flex;
    justify-content: space-between;
}
.empty:before {
    color: #99a2aa;
    content: attr(placeholder);
    font-size: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    pointer-events: none;
    position: absolute;
}
.bili-rich-textarea__inner {

    margin-left: 0px;
        font-size: 14px;
    line-height: 22px;
    min-height: 22px;
    word-wrap: break-word;
    background-color: #fff;
    box-sizing: border-box;
    color: #222;
    font-size: 14px;
    letter-spacing: 1px;
    outline: none;
    position: relative;
    vertical-align: baseline;
    white-space: pre-wrap;
    width: 100%;
    word-break: break-all;
}
.bili-rich-textarea {
    cursor: text;
    height: 100%;
    overflow-y: auto;
    position: relative;
    width: 100%;
}
.bili-dyn-publishing__input {
    margin-bottom: 12px;
    position: relative;
}
.bili-topic-selector__rcmd__default {
    align-items: center;
    display: flex;
    flex: 12;
    overflow: hidden;
}
.bili-topic-selector__rcmd {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    max-width: calc(100% - 96px);
    padding-left: 8px;
}
.bili-topic-search__input__text {
    color: #9499a0;
    cursor: text;
    flex-shrink: 0;
    font-size: 14px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.bili-topic-search__input {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    flex-shrink: 0;
    height: 22px;
    padding: 0 10px 0 8px;
    transition: all .3s;
    width: 100%;
}
.bili-topic-search__popover {
    background-color: #f6f7f8;
    border: 1px solid #f6f7f8;
    border-radius: 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transition: all .3s;
    width: 100%;
    z-index: 11;
}
.bili-topic-search {
    flex-shrink: 0;
    height: 24px;
    position: relative;
    width: 96px;
}
.bili-topic-selector__desk {
    align-items: center;
    display: flex;
    width: 100%;
}
.bili-topic-selector {
    display: flex;
    font-family: PingFang SC;
    font-size: 14px;
    font-style: normal;
    height: 24px;
    position: relative;
    width: 100%;
}
.bili-dyn-publishing__topic {
    height: 32px;
}
.bili-dyn-publishing {
    background-color: #fff;
    border-radius: 4px;
    box-sizing: border-box;
    min-width: 632px;
    padding: 16px;
    position: relative;
    width: 100%;
}
main {
    margin: 0 8px;
    width: 632px;
}
#app1 {
    margin: 0px auto;
    padding-top: 77px;
    min-height: 100vh;
    max-width: 2560px;
    position: relative;
}
.bili-dyn-my-info {
    position: relative;
    background-color: #fff;
    border-radius: 4px;
    width: 100%;
    height: 188px;
}
section {
    width: 100%;
    margin-bottom: 8px;
}
.left {
    width: 244px;
}
.bili-dyn-home--member {
    display: flex;
    justify-content: center;
    margin: 0 auto;
    min-height: 150vh;
}
 .bg {
    pointer-events: none;
    z-index: -1;
    position: fixed;
    top: 0;
    left: 50%;
    width: 100%;
    height: 56.25vw;
    transform: translateX(-50%);
    background-image: url(http://img.mp.itc.cn/upload/20170427/c1f97a86adf345b68591da62f3847a66_th.jpeg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top;
}
/*  */
/* 导航栏 */
.css-navSearchInput-hcAgF {
    float: left;
    height: 34px;
    line-height: 36px;
    font-size: 12px;
    background: none;
    border: none;
    outline: 0;
    width: 80%;

    color:rgba(34, 31, 31, 1);
}
.css-navSearchIcon-byBLe {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 15px;
  height: 15px;
  cursor: pointer;
}
.css-navSearchWrapper-SmTKa {
    position: relative;
    padding: 0 16px;
    height: 39px;
    border-radius: 100px;
    background: #eceaea;
    margin: 0px 8px 0 0;
    -webkit-transition: width 0.2s;
    transition: width 0.2s;

/* background:rgba(255, 255, 255, 0.5); */
}
.css-navRightItemAvatar-Dhkpn{

    text-align: center;
    font-size: 16px;
    color: rgb(255, 255, 255);
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    overflow: hidden;
    margin-top: 6px;
    background-color: rgb(255, 255, 255);
}
.right-entry {
    margin-left: 20px;
    display: flex;
    align-items: center;
    list-style-type: none;
}
.default-entry {
    display: inline-block;
        height: 64px;
    line-height: 64px;
    font-size: 14px;
    cursor: pointer;
    margin-right: 25px;
    }
a {
    text-decoration: none;
    background-color: transparent;
}
.left-entry__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-right: 25px;
    height: 56px;
}
.v-popover-wrap {
    position: relative;
}
.mini-header__title {
    display: flex;
    align-items: center;
    text-align: center;
    font-size: 14px;
    line-height: 20px;
    cursor: pointer;
    color: rgb(0, 0, 0);
}
.left-entry {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: 5px;
    list-style-type: none;
}
.mini-header {
    background: var(--bg1);
    box-shadow: 0 2px 4px #00000014;
}
.bili-header__bar {
    position: absolute;
    top: 0;
    z-index: 1002;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0px;
    max-width: 2560px;
    width: 100%;
    height: 64px;
}
.bili-header {
        position: absolute;
    top: 0;
    z-index: 1002;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0px;
    max-width: 2560px;
    width: 100%;
    height: 64px;
    background-color: #fff;
    padding-bottom: 5px;
    margin-left: -8px;
}
</style>
